<template>
	<view class="content">
		<u-navbar bgColor="transparent" titleStyle="color:#fff" title="提现" leftIconColor="#fff" :autoBack="true"
			:placeholder="false">
		</u-navbar>
		<view style="height: 70rpx;"></view>
		<view class="content-box">
			<view class="name-box">
				<view class="head">
					<image src="/static/community/usdt.png" mode=""></image>
					<text>USDT</text>
				</view>
				<view class="name-text">
					<view>
						链名称
					</view>
					<view class="name-btn">
						USDT-TRC20
					</view>
				</view>
			</view>
			<view class="info">
				<view class="content-title">
					提现地址
				</view>
				<view class="entry">
					{{info.usdt_address}}
				</view>
				<view class="content-title">
					提现USDT
				</view>
				<view class="entry">
					<u--input maxlength="16" border="none" color="#fff" v-model="number" placeholder="请输入提现USDT">
						<template slot="suffix">
							<view class="entry-text" @click="allNum">
								全部提现
							</view>
						</template>
					</u--input>
				</view>
				<view class="content-title">
					支付密码
				</view>
				<view class="entry">
					<u--input maxlength="6" :type="pass_type" border="none" color="#fff" v-model="password"
						placeholder="请输入支付密码">
						<template slot="suffix">
							<u-icon v-if="pass_type == 'password'" name="eye-fill" color="#fff" size="18"
								@click="changeType"></u-icon>
							<u-icon v-else name="eye-off" color="#fff" size="18" @click="changeType"></u-icon>
						</template>
					</u--input>
				</view>
				<view class="tips">
					<view>
						可用余额
					</view>
					<view class="tips-num">
						{{info.balance}}USDT
					</view>
				</view>
				<view class="tips">
					<view>
						手续费
					</view>
					<view class="tips-num">
						{{info.Withdrawal_Fee}}%
					</view>
				</view>
			</view>
			<view class="btn">
				<u-button size="large"
					color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)" class="btn-color"
					type="primary" text="确认" shape="circle" @click="gowithdrawal"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: '',
				number: '',
				info: {},
				password: '',
				pass_type: 'password'
			}
		},
		onLoad() {
			this.getwithdrawal()
		},
		methods: {
			changeType() {
				if (this.pass_type == 'password') {
					this.pass_type = 'text'
				} else {
					this.pass_type = 'password'
				}
			},
			getwithdrawal() {
				let params = {

				}
				this.$Request({
					method: 'POST',
					url: '/api/Personal/withdrawalRender',
					data: params
				}).then(res => {
					if (res.code == 1) {
						this.info = res.user_info
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			gowithdrawal() {
				let params = {
					num: this.number,
					type: 1,
					password: this.password
				}
				this.$Request({
					method: 'POST',
					url: '/api/Personal/Withdrawal',
					data: params
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			allNum() {
				this.number = this.info.balance
			}
		}
	}
</script>

<style>
	page {
		background-color: #17191A;
	}

	.btn-color {
		color: #17191A !important;
	}
</style>
<style lang="scss" scoped>
	.content {
		background-image: url('../../../static/my/my-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 558rpx;
		.content-box {
			padding: 30rpx;
			.name-box {
				background: linear-gradient( 134deg, rgba(255,227,211,0.06) 0%, rgba(67,130,84,0.26) 100%);
				border: 4rpx solid rgba(108,233,137,0.12);
				padding: 30rpx;
				border-radius: 20rpx;
				color: #fff;

				.head {
					font-size: 32rpx;
					font-weight: 600;
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
				}

				.name-text {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					font-weight: 600;
					margin-top: 20rpx;

					.name-btn {
						color: #000;
						font-weight: 400;
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						background-color: #fff;
						border-radius: 10rpx;
						border: 1rpx solid #ddd;
					}
				}
			}

			.info {
				color: #fff;
				margin-top: 30rpx;
				background: linear-gradient( 134deg, rgba(255,227,211,0.06) 0%, rgba(67,130,84,0.26) 100%);
				border: 4rpx solid rgba(108,233,137,0.12);
				padding: 0 30rpx 30rpx;
				border-radius: 20rpx;

				.content-title {
					font-size: 28rpx;
					font-weight: 600;
					padding: 30rpx 0;
				}

				.entry {
					padding: 20rpx;
					background-color: rgba(238, 238, 238, 0.2);
					border-radius: 20rpx;

					.entry-text {
						font-size: 24rpx;
					}
				}

				.tips {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30rpx;
					color: #fff;
					font-weight: 600;
					font-size: 28rpx;

					.tips-num {
						color: #b5b5b5;
						font-size: 26rpx;
						font-weight: 400;
					}
				}
			}

			.btn {
				margin-top: 50rpx;
			}
		}
	}
</style>